<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/CalendarMain.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content2" ContentPlaceHolderID="Title" runat="server">
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadCustom" runat="server">
<%--    <link rel="stylesheet" href= "../../Content/reset.css" type="text/css" />--%>
	<link rel="stylesheet" href="../../Content/theme/start/jquery-ui-1.7.2.custom.css" type="text/css" />    
	<link rel="stylesheet" href= "../../Content/jquery.weekcalendar.css" type="text/css" />
	<style type="text/css" media="screen">
        body {
	        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	        font-size: 83.33%;
        }
        h1 {
	        padding: 0.5em;
	        font-size: 1.6em;
        } 
        h2 {
	        margin: 0.5em 0;
	        font-size: 1.4em;	
        }
        p {
	        margin: 0.5em;	
        }
        .ui-widget {
	        font-size: 1em;	
        }
        #event_edit_container, #about {
	        display: none;
        }
        #about_button_container {
	        position: absolute;
	        top: 1em;
	        right: 1em;	
	        padding: 0.5em 2em;
	        background: #ddf;
	        border: 1px solid #bbd;
	        width: 10em;
	        text-align: center;
        }
        .week-calendar-header td {
	        background: url(<%=Url.Content("~/Content/images/header-bg.png")%>) repeat-x;
        }
        label {
	        display: block;
	        margin-top: 1em;
	        margin-bottom: 0.5em;
        }
        form ul {
	        padding: 0.3em;
        }
        select, input[type='text'], textarea {
	        width: 250px;
	        padding: 3px;
        }
        input[type='text'] {
	        width: 245px;
        }
        ul.formatted,ol.formatted {
	        display: block;
	        margin: 1em 0.5em;
        }

        ul.formatted li,ol.formatted li {
	        margin: 5px 30px;
	        display: auto;
        }
        ul.formatted li {
	        list-style-type: disc;
        }
        ol.formatted li {
	        list-style-type: decimal;
        }	    
	</style>	

    <% if (false) { %>
        <script type="text/javascript" src="../../JS/jquery-1.3.2-vsdoc.js"></script>
        <script type="text/javascript" src="../../JS/jquery-1.3.2.js"></script>
        <script type="text/javascript" src="../../JS/jqueryui/1.7.1/jquery-ui.js"></script>
        <script type="text/javascript" src="../../JS/jquery.weekcalendar.js"></script>                
    <% } %>	
	
    <script src="<%=Url.Content("~/JS/jquery-1.3.2.js")%>" type="text/javascript"></script>     		
    <script src="<%=Url.Content("~/JS/jqueryui/1.7.1/jquery-ui.js")%>" type="text/javascript"></script>   
   <script src="<%=Url.Content("~/JS/jquery.weekcalendar.js")%>" type="text/javascript"></script>       
    <script type="text/javascript">
        $(document).ready(function() {
            var $calendar = $('#calendar');
            var id = 10;
            $calendar.weekCalendar({
                timeslotsPerHour: 4,
                allowCalEventOverlap: true,
                firstDayOfWeek: 1,
                businessHours: { start: 8, end: 18, limitDisplay: true },
                height: function($calendar) {
                    return $("#content").height() - $("h1").outerHeight();
                },
                eventRender: function(calEvent, $event) {
                    if (calEvent.end.getTime() < new Date().getTime()) {
                        $event.css("backgroundColor", "#aaa");
                        $event.find(".time").css({
                            "backgroundColor": "#999",
                            "border": "1px solid #888"
                        });
                    }
                },
                draggable: function(calEvent, $event) {
                    return calEvent.readOnly != true;
                },
                resizable: function(calEvent, $event) {
                    return calEvent.readOnly != true;
                },
                eventNew: function(calEvent, $event) {
                    var $dialogContent = $("#event_edit_container");
                    resetForm($dialogContent);
                    var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
                    var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
                    var titleField = $dialogContent.find("input[name='title']");
                    var bodyField = $dialogContent.find("textarea[name='body']");
                    $dialogContent.dialog({
                        modal: true,
                        title: "New Calendar Event",
                        close: function() {
                            $dialogContent.dialog("destroy");
                            $dialogContent.hide();
                            $('#calendar').weekCalendar("removeUnsavedEvents");
                        },
                        buttons: {
                            save: function() {
                                calEvent.id = id;
                                id++;
                                calEvent.start = new Date(startField.val());
                                calEvent.end = new Date(endField.val());
                                calEvent.title = titleField.val();
                                calEvent.body = bodyField.val();

                                $calendar.weekCalendar("removeUnsavedEvents");
                                //$calendar.weekCalendar("updateEvent", calEvent);
                                //SavingEvent(Guid id,DateTime start,DateTime end,string title,string body)
                                $.post("<%=Url.Content("/Calendar/SavingEvent")%>", {
                                    id: calEvent.id,
                                    start: $calendar.weekCalendar("formatDate", calEvent.start,"Y-m-d-H-i-s"),
                                    end: $calendar.weekCalendar("formatDate", calEvent.end,"Y-m-d-H-i-s"),
                                    title:calEvent.title,
                                    body:calEvent.body                                 
                                }, function(data){
                                if(data.success != 'OK') {
                                  alert("Saving Event " + data);
                                }else {
                                    $calendar.weekCalendar("updateEvent", calEvent);
                                }})                                
                                $dialogContent.dialog("close");
                            },
                            cancel: function() {
                                $dialogContent.dialog("close");
                            }
                        }
                    }).show();

                    $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
                    setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
                    $(window).resize().resize(); //fixes a bug in modal overlay size ??
                },
                eventDrop: function(calEvent, $event) {
                },
                eventResize: function(calEvent, $event) {
                },
                eventClick: function(calEvent, $event) {
                    if (calEvent.readOnly) {
                        return;
                    }
                    var $dialogContent = $("#event_edit_container");
                    resetForm($dialogContent);
                    var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
                    var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
                    var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
                    var bodyField = $dialogContent.find("textarea[name='body']");
                    bodyField.val(calEvent.body);
                    $dialogContent.dialog({
                        modal: true,
                        title: "Edit - " + calEvent.title,
                        close: function() {
                            $dialogContent.dialog("destroy");
                            $dialogContent.hide();
                            $('#calendar').weekCalendar("removeUnsavedEvents");
                        },
                        buttons: {
                            save: function() {

                                calEvent.start = new Date(startField.val());
                                calEvent.end = new Date(endField.val());
                                calEvent.title = titleField.val();
                                calEvent.body = bodyField.val();

                                $calendar.weekCalendar("updateEvent", calEvent);
                                $dialogContent.dialog("close");
                            },
                            "delete": function() {
                                $calendar.weekCalendar("removeEvent", calEvent.id);
                                $dialogContent.dialog("close");
                            },
                            cancel: function() {
                                $dialogContent.dialog("close");
                            }
                        }
                    }).show();
                    var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
                    var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
                    $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
                    setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
                    $(window).resize().resize(); //fixes a bug in modal overlay size ??
                },
                eventMouseover: function(calEvent, $event) {
                },
                eventMouseout: function(calEvent, $event) {
                },
                noEvents: function() {
                },
                data: function(start, end, callback) {
                    //callback(getEventData(start));
                    var year = start.getFullYear();
                    var month = start.getMonth()+1;
                    var day = start.getDate();
                    $.getJSON("<%=Url.Content("/Calendar/WeekInfo/") %>" + year + "/" + month + "/" + day, null, function(events) {
                        var result = events.Events;
                        callback(result);
                    });
                }
            });
            function resetForm($dialogContent) {
                $dialogContent.find("input").val("");
                $dialogContent.find("textarea").val("");
            }
            function getEventData(start) {

            }
//SavingEvent(Guid id,DateTime start,DateTime end,string title,string body)            
            /*
            * Sets up the start and end time fields in the calendar event 
            * form for editing based on the calendar event being edited
            */
            function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {

                for (var i = 0; i < timeslotTimes.length; i++) {
                    var startTime = timeslotTimes[i].start;
                    var endTime = timeslotTimes[i].end;
                    var startSelected = "";
                    if (startTime.getTime() === calEvent.start.getTime()) {
                        startSelected = "selected=\"selected\"";
                    }
                    var endSelected = "";
                    if (endTime.getTime() === calEvent.end.getTime()) {
                        endSelected = "selected=\"selected\"";
                    }
                    $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
                    $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");

                }
                $endTimeOptions = $endTimeField.find("option");
                $startTimeField.trigger("change");
            }

            var $endTimeField = $("select[name='end']");
            var $endTimeOptions = $endTimeField.find("option");

            //reduces the end time options to be only after the start time options.
            $("select[name='start']").change(function() {
                var startTime = $(this).find(":selected").val();
                var currentEndTime = $endTimeField.find("option:selected").val();
                $endTimeField.html(
            $endTimeOptions.filter(function() {
                return startTime < $(this).val();
            })
        );
                var endTimeSelected = false;
                $endTimeField.find("option").each(function() {
                    if ($(this).val() === currentEndTime) {
                        $(this).attr("selected", "selected");
                        endTimeSelected = true;
                        return false;
                    }
                });

                if (!endTimeSelected) {
                    //automatically select an end date 2 slots away. 
                    $endTimeField.find("option:eq(1)").attr("selected", "selected");
                }

            });
            var $about = $("#about");
            $("#about_button").click(function() {
                $about.dialog({
                    title: "About this calendar demo",
                    width: 600,
                    close: function() {
                        $about.dialog("destroy");
                        $about.hide();
                    },
                    buttons: {
                        close: function() {
                            $about.dialog("close");
                        }
                    }
                }).show();
            });
        });    
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h2>WeekCalendar</h2>
	<div id="about_button_container">
		<button type="button" id="about_button">About this demo</button>
	</div>
	<div id='calendar' style="height:700px"></div>
	<div id="event_edit_container">
		<form>
			<input type="hidden" />
			<ul>
				<li>
					<span>Date: </span><span class="date_holder"></span> 
				</li>
				<li>
					<label for="start">Start Time: </label><select name="start"><option value="">Select Start Time</option></select>
				</li>
				<li>
					<label for="end">End Time: </label><select name="end"><option value="">Select End Time</option></select>
				</li>
				<li>
					<label for="title">Title: </label><input type="text" name="title" />
				</li>
				<li>
					<label for="body">Body: </label><textarea name="body"></textarea>
				</li>
			</ul>
		</form>
	</div>
	<div id="about">
		<h2>Summary</h2>
		<p>
			This calendar implementation demonstrates further usage of the calendar with editing and deleting of events. 
			It stops short however of implementing a server-side back-end which is out of the scope of this plugin. It 
			should be reasonably evident by viewing the demo source code, where the points for adding ajax should be. 
			Note also that this is **just a demo** and some of the demo code itself is rough. It could certainly be 
			optimised.
		</p>
		<p>
			***Note: This demo is straight out of SVN trunk so may show unreleased features from time to time.
		</p>
		<h2>Demonstrated Features</h2>
		<p>
			This calendar implementation demonstrates the following features:
		</p>
		<ul class="formatted">
			<li>Adding, updating and deleting of calendar events using jquery-ui dialog. Also includes 
				additional calEvent data (body field) not defined by the calEvent data structure to show the storage 
				of the data within the calEvent</li>
			<li>Dragging and resizing of calendar events</li>
			<li>Restricted timeslot rendering based on business hours</li>
			<li>Week starts on Monday instead of the default of Sunday</li>
			<li>Allowing calEvent overlap with staggered rendering of overlapping events</li>
			<li>Use of the 'getTimeslotTimes' method to retrieve valid times for a given event day. This is used to populate
				select fields for adding, updating events.</li>
			<li>Use of the 'eventRender' callback to add a different css class to calEvents in the past</li>
			<li>Use of additional calEvent data to enforce readonly behaviour for a calendar event. See the event
				titled "i'm read-only"</li>
		</ul>
	</div>    

</asp:Content>



<asp:Content ID="Content4" ContentPlaceHolderID="Scripts" runat="server">
</asp:Content>
